<template>
  <div id="container"></div>
</template>

<script setup>
import { onMounted, onUnmounted } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
const props = defineProps(['x', 'y'])

let map = null;
const emit = defineEmits(['fun'])
onMounted(() => {
  console.log(JSON.stringify(props))
  window._AMapSecurityConfig = {
    securityJsCode: "6d7ebdc5b85f7fd9df23c21dc432ca70",
  };
  AMapLoader.load({
    key: "9d986f93e20a02afe9f6708cdbb20cfe", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
  })
      .then((AMap) => {
        map = new AMap.Map("container", {
          // 设置地图容器id
          viewMode: "3D", // 是否为3D地图模式
          zoom: 16, // 初始化地图级别
          center: props.x !== undefined &&  props.x !== 0? [props.x, props.y] : [116.396871,39.918162], // 初始化地图中心点位置
        });
          var marker = new AMap.Marker({
            position:props.x !== undefined && props.x !== 0? [props.x, props.y] : [116.396871,39.918162]//位置
          })
          map.add(marker);//添加到地图
        map.on('click', function(e) {
          map.remove(marker);
          marker = new AMap.Marker({
            position:[e.lnglat.getLng(), e.lnglat.getLat()]//位置
          })
          map.add(marker);//添加到地图
          emit('fun',{x:e.lnglat.getLng(),y: e.lnglat.getLat()})
          console.log('您在[ '+e.lnglat.getLng()+','+e.lnglat.getLat()+' ]的位置点击了地图！');
        });
      })
      .catch((e) => {
        console.log(e);
      });
});

onUnmounted(() => {
  map?.destroy();
});
</script>

<style scoped>
#container {
  width: 100%;
  height: 650px;
}
</style>
